<div class="flex flex-col md:flex-row items-center justify-center mb-12">
  {{ $img := partial "utils/get-image" (dict "context" . "url" .Params.avatar "keyword" "*avatar*")}}
  {{ with $img }}
    <div class="flex-none w-48 mx-auto md:ml-0 md:mr-8 md:pr-8 md:border-r">
      <img src="{{ . }}" class="rounded-full" alt="Avatar">
    </div>
  {{ end }}
  <div class="flex-grow mt-4 md:mt-0">
    <div class="text-3xl py-4">{{ .Title }}</div>
    <div class="w-3/12 xl:w-2/12 border-b"></div>

    <div class="flex items-center pt-4">
      {{ with or (.Params.role) (.Params.organizations)}}
        <i class="fas fa-user"></i>
      {{ end }}
      <div class="flex flex-wrap">
        {{ with .Params.role }}
          <span class="pl-4">{{ . | markdownify }}</span>
        {{ end }}

        {{ with .Params.organization }}
          <a href="{{ .url }}" class="pl-4">{{ .name | markdownify }}</a>
        {{ end }}
      </div>

    </div>

    {{ with .Params.bio }}
      <div class="py-8 text-lg leading-normal">
        {{ . | markdownify }}
      </div>
    {{ end }}
  </div>
  <div class="flex md:flex-col justify-center items-end ml-8">
    {{ $brand := $.Param "social"}}
    {{ range $brand }}
      {{/* Deprecation warning(v1.0.0) starts */}}
      {{ if .icon_pack }}
        {{ warnf "Param 'icon_pack' in %q is deprecated and will be removed in Eureka v1.0.0. Use 'iconPack' instead." $.File.Path }}
      {{ end }}
      {{ $iconPack := .iconPack | default .icon_pack }}
      {{/* Deprecation warning(v1.0.0) ends */}}
      {{ $src := print $iconPack " fa-" .icon }}
      <div class="pb-2 pr-4 md:pr-0 pt-4 md:pt-0">
        <a href="{{ .url }}"><i class="{{ print $src }}"></i></a>
      </div>
    {{ end }}
  </div>
</div>
<div class="content">
  {{ .Content }}
</div>
